<template>
  <div class="product-list">
    <h1 class="mb-3">商品列表</h1>
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="8">
        <el-input placeholder="请输入商品标题" v-model="queryInfo.query" clearable @clear="fetch">
          <el-button slot="append" icon="el-icon-search" @click="fetch">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="items" border :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column type="expand" label="查看商品" width="60">
        <template slot-scope="scope">
          <div class="expand-cell d-flex">
            <div class="title mr-2">商品描述</div>
            <div v-html="scope.row.description"></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" min-width="150"></el-table-column>
      <el-table-column prop="name" label="标题" min-width="150"></el-table-column>
      <el-table-column
        prop="cateLabel"
        label="类别"
        min-width="120"
        :filters="cateList"
        :filter-method="filterCate"
        :filter-placement="placement"
      >
      </el-table-column>
      <el-table-column prop="price" label="单价(元/个)" width="100"></el-table-column>
      <el-table-column prop="default_num" label="默认下单数量(个)" width="80"></el-table-column>
      <el-table-column
        prop="on_shelf_text"
        label="商品状态"
        width="100"
        :filters="[
          { text: '正常', value: '1' },
          { text: '下架', value: '0' },
        ]"
        :filter-method="filterStatus"
        :filter-placement="placement"
      ></el-table-column>
      <el-table-column
        prop="product_status_text"
        label="商品审核状态"
        width="80"
        :filters="[
          { text: '待审核', value: '0' },
          { text: '通过', value: '1' },
          { text: '未通过', value: '2' },
          { text: '无', value: '3' },
        ]"
        :filter-method="filterCheckStatus"
        :filter-placement="placement"
      ></el-table-column>
      <el-table-column prop="rejection" label="未通过原因" width="120"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="goEdit(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <Pagination :obj="obj" @pagination="fetch($event)" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import GetCateList from "@/utils/productCate";
import bus from "@/utils/eventBus";
import lf from "localforage";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      items: [],
      cateList: [],
      obj: {
        total: 0,
      },
      placement: "top",
    };
  },
  created() {
    this.fetch();
    this.getCateList();
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    filterStatus(value, row) {
      return row.on_shelf == value;
    },
    filterCheckStatus(value, row) {
      return row.product_status == value;
    },
    filterCate(value, row) {
      return row.productCategories[0].id == value;
    },
    handleChange() {},
    // 获取商品分类列表
    async getCateList() {
      const arr = await GetCateList();
      arr.forEach((item) => {
        item.text = item.label;
      });
      this.cateList = arr;
    },
    async fetch(page) {
      if (page && page.newPage) this.queryInfo.pagenum = page.newPage;
      if (page && page.newSize) this.queryInfo.pagesize = page.newSize;

      // console.log(this.queryInfo.query);
      const formData = new FormData();
      formData.append("searchForm", this.queryInfo.query);
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      const { data: res } = await this.$http.post("findProductByPage", formData);
      // console.log(res, "返回的原始数据");
      if (res.code != "0") return this.$message("获取商品列表失败");

      res.data.result.forEach((item) => {
        if (item.productCategories.length == 1) {
          item.cateLabel = item.productCategories[0].info_name;
        } else if (item.productCategories.length == 2) {
          item.cateLabel = item.productCategories[0].info_name + " / " + item.productCategories[1].info_name;
        }
        item.on_shelf_text = item.on_shelf == 1 ? "正常" : "下架";
        if (item.on_shelf == 0) item.product_status = 3;

        const checkStatusList = ["待审核", "通过", "未通过", "无"];
        item.product_status_text = checkStatusList[item.product_status];
      });

      // console.log(res, "处理后的数据");
      this.items = res.data.result;
      this.obj.total = res.data.totalCount;
    },
    async goEdit(row) {
      // console.log(row);
      await lf.setItem("currentGoods", row);
      this.$router.push(`/product/edit/${row.id}`);
      bus.$emit("changeBread", ["商品管理", "编辑商品"]);
    },
    remove(row) {
      this.$confirm(`确定要删除该商品 "${row.name}" 吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const formData = new FormData();
          formData.append("ids", [row.id]);
          const { data: res } = await this.$http.post("delProduct", formData);
          // console.log(res);
          if (res.code != "0") return this.$message("删除商品失败");
          this.$message.success("删除成功");
          this.fetch();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
.product-list {
  .el-table__column-filter-trigger {
    i {
      font-size: 20px;
      line-height: 23px;
    }
  }
}
</style>
